<template>
  <div>
  <el-carousel indicator-position="outside">
    <el-carousel-item v-for="item in items" :key="item.index" >
      <h3  class="medium"><el-image :src="item.pic" ><a href="#"></a>
        </el-image></h3>
    </el-carousel-item>
  </el-carousel>

<el-row class="warp">
  <el-col :span="24" class="warp-breadcrum">
        <h2><b>最新文章</b></h2>
    </el-col>
   <el-col :span="24" class="warp-main">
     <el-row>
       <el-col :span="6"  v-for="item in newArticles" :key="item.id">
            <el-card :body-style="{ padding: '0px' }" class="kk">
              <img   :src="item.pic" class="image ss" @click="findArticleById(item.id)">
              <div style="padding: 14px;">
                <span @click="findArticleById(item.id)">{{item.articleName}}</span>
                <div class="bottom clearfix">
                  <time class="time">{{ item.createTime }}</time>
                </div>
              </div>
            </el-card>
          </el-col>
     </el-row>
   </el-col>
</el-row>

<el-row class="warp">
  <el-col :span="24" class="warp-breadcrum">
        <h2><b>最新视频</b></h2>
    </el-col>
   <el-col :span="24" class="warp-main">
     <el-row>
       <el-col :span="6"  v-for="item in videos" :key="item.index">
            <el-card :body-style="{ padding: '0px' }" class="kk">
              <img :src="item.pic" class="image ss" @click="findVideoById(item.id)">
              <div style="padding: 14px;">
                <span>{{item.vname}}</span>
                <div @click="findVideoById(item.id)" class="bottom clearfix">
                  <time class="time">{{ item.createTime }}</time>
                </div>
              </div>
            </el-card>
          </el-col>
     </el-row>
   </el-col>
</el-row>

  </div>
</template>

<script>

import axios from 'axios';
export default {
  name:'',
  data () {
    return {
      items:[],
      newArticles:[],
      videos:[]
    }
  },
  created () {

  },
  mounted () {
    this.findPictures();
    this.findNewArticles();
     this.findNewVideos();
  },
  methods: {
      findPictures(){
        axios.post('http://localhost:8088/article/findArticleByTime',{size:5}).then(res=>{
          if(res.data.code==0){
            this.items=res.data.data
          }
        })
       },
        findNewArticles(){
        axios.post('http://localhost:8088/article/findArticleByTime',{size:8}).then(res=>{
          if(res.data.code==0){
            this.newArticles=res.data.data
          }
        })
       },
        findNewVideos(){
        axios.post('http://localhost:8088/video/priceall',{size:8}).then(res=>{
          if(res.data.code==0){
            this.videos=res.data.data
          }
        })
       },
       findArticleById(id){
          this.$router.push({name:"articleInfo",params:{id:id}})
       },
       findVideoById(id){
         this.$router.push({name:"videoInfo",params:{id:id}})
       },
  },
}
</script>
<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
<style>
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: transparent;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 100px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .image{
    height: 260px;
    width: 260px;
  }
  .kk{
    height: 260px;
    width: 260px;
  }.ss{
     height: 200px;
    width: 260px;
  }
</style>
